<template>
  <div>
    <!-- 面包屑导航 -->
    <Breadcrumb :breadcrumbInfo="breadcrumbInfo"></Breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加分类按钮 -->
      <el-button
        class="btn-addcategories"
        type="primary"
        icon="el-icon-edit"
        size="medium "
        @click="setAddCateDiaolog"
        >添加分类</el-button
      >

      <!-- 商品表格信息区域 -->
      <tree-table
        :data="catagorForm.cateList"
        :columns="catagorForm.columns"
        :expand-type="false"
        :selection-type="false"
        :show-index="true"
        :show-row-hover="false"
        border
      >
        <!-- 是否有效列 -->
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen"
            v-if="scope.row.cat_deleted === false"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <!-- 排序列 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" type="" v-if="scope.row.cat_level === 0"
            >一级</el-tag
          >
          <el-tag
            size="mini"
            type="success"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>

        <!-- 操作列 -->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="getEditCateList(scope.row)"
            >编辑</el-button
          >
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleCate(scope.row.cat_id)"
            >删除</el-button
          >
        </template>
      </tree-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="catagorForm.total"
        :current-page.sync="catagorForm.querInfo.pagenum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="catagorForm.querInfo.pagesize"
        layout="total,sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类的对话框 -->

    <el-dialog
      title="提示"
      :visible.sync="AddCateDiaologInfo.isShow"
      width="50%"
      @close="addCateDiaologClose"
    >
      <!-- 添加分类的表单 -->
      <el-form :model="AddCateDiaologInfo" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="AddCateDiaologInfo.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- options 指定数据源 -->
          <!-- Cascader 级联选择器 -->
          <el-cascader
            clearable
            filterable
            checkStrictly
            v-model="AddCateDiaologInfo.cascaderkeys"
            :options="AddCateDiaologInfo.ParentCateList"
            :props="cascaderProps"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddCateDiaologInfo.isShow = false">取 消</el-button>
        <el-button type="primary" @click="upCateList">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑的对话框 -->
    <el-dialog
      title="商品分类编辑"
      :visible.sync="EditCateDiaologInfo.isShow"
      width="50%"
    >
      <!-- 添加分类的表单 -->
      <el-form :model="EditCateDiaologInfo" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="EditCateDiaologInfo.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditCateDiaologInfo.isShow = false">取 消</el-button>
        <el-button type="primary" @click="upEditCateList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from "../../components/Breadcrumb.vue";

export default {
  name: "Categories",
  components: { Breadcrumb },

  data() {
    return {
      // 商品类别面包屑导航信息
      breadcrumbInfo: {
        titlePath: [
          { title: "首页", Path: "/Home" },
          { title: "商品管理", Path: "" },
          { title: "商品分类", Path: "" },
        ],
      },
      // 商品类别表单信息
      catagorForm: {
        //   所有商品信息
        cateList: [],
        // 所有商品信息总数
        total: 0,
        //   查询条件
        querInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 5,
        },
        //为table指定列
        columns: [
          {
            label: "商品分类",
            prop: "cat_name",
            width: "400px",
          },

          {
            label: "是否有效",
            // 表示将当前列定义为模板列
            type: "template",
            // 表示当前这一列的模板名称
            template: "isok",
            width: "50px",
            align: "center",
          },

          {
            label: "排序",
            // 表示将当前列定义为模板列
            type: "template",
            // 表示当前这一列的模板名称
            template: "order",
            width: "100px",
            align: "center",
          },
          {
            label: "操作",
            // 表示将当前列定义为模板列
            type: "template",
            // 表示当前这一列的模板名称
            width: "200px",
            template: "opt",
            align: "center",
          },
        ],
      },

      // 添加商品分类的Diaolog信息
      AddCateDiaologInfo: {
        isShow: false,
        // 父级分类id
        cat_pid: 0,
        // 将要添加分类的名称
        cat_name: "",
        // 分类等级默认为一级
        cat_level: 0,
        //分类列表
        ParentCateList: [],

        // 选中后获取的父级id的数组
        cascaderkeys: [],
      },
      //多级选择器的配置
      cascaderProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      // 编辑商品分类的Diaolog信息
      EditCateDiaologInfo: {
        isShow: false,
        cat_name: "",
        cat_id: "",
      },

      // 验证规则
      AddCateFormRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    //监听 pagesize 改变
    handleSizeChange(newPagesize) {
      this.catagorForm.querInfo.pagesize = newPagesize;
      this.getCateList();
    },

    //监听 pagenum 改变
    handleCurrentChange(newPages) {
      this.catagorForm.querInfo.pagenum = newPages;
      this.getCateList();
    },

    // 添加分类的信息
    setAddCateDiaolog() {
      this.getParentCateList();
      this.AddCateDiaologInfo.isShow = true;
    },

    // 添加分类的对话框关闭
    addCateDiaologClose() {
      this.AddCateDiaologInfo.cat_name = "";
      this.AddCateDiaologInfo.cascaderkeys = [];
      this.AddCateDiaologInfo.cat_pid = 0;
      this.AddCateDiaologInfo.cat_level = 0;
    },

    //  加入元素并更新添加后分类的信息
    async upCateList() {
      //如果selectedKeys 数组中的 length大于0，证明选中的父级分类
      if (this.AddCateDiaologInfo.cascaderkeys.length > 0) {
        // 父级的Id
        this.AddCateDiaologInfo.cat_pid =
          this.AddCateDiaologInfo.cascaderkeys[
            this.AddCateDiaologInfo.cascaderkeys.length - 1
          ];
        // 为当前分类的等级赋值
        this.AddCateDiaologInfo.cat_level =
          this.AddCateDiaologInfo.cascaderkeys.length;
      } else {
        this.AddCateDiaologInfo.cat_pid = 0;
        this.AddCateDiaologInfo.cat_level = 0;
      }
      const { data: res } = await this.$http.post("categories", {
        cat_pid: this.AddCateDiaologInfo.cat_pid,
        cat_name: this.AddCateDiaologInfo.cat_name,
        cat_level: this.AddCateDiaologInfo.cat_level,
      });
      if (res.meta.status != 201) {
        return this.$message.error(res.meta.msg);
      }
      this.$message.success("创建成功!!!");
      this.getCateList();
      this.AddCateDiaologInfo.isShow = false;
    },

    // 获取要编辑的分类信息
    getEditCateList(cate) {
      this.EditCateDiaologInfo.isShow = true;
      this.EditCateDiaologInfo.cat_name = cate.cat_name;
      this.EditCateDiaologInfo.cat_id = cate.cat_id;
    },
    // 更新编辑后的商品分类信息
    upEditCateList() {
      this.$http
        .put("categories/" + this.EditCateDiaologInfo.cat_id, {
          cat_name: this.EditCateDiaologInfo.cat_name,
        })
        .then(
          (response) => {
            if (response.data.meta.status !== 200) {
              return this.$message.error(response.data.meta.msg);
            }
            this.getCateList();
            this.$message.success(response.data.meta.msg);
            this.EditCateDiaologInfo.isShow = false;
          },
          (error) => {
            this.$message.error(error);
          }
        );
    },

    //删除商品分类
    deleCate(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$http.delete("categories/" + id).then(
            (response) => {
              if (response.data.meta.status !== 200) {
                return this.$message.error(response.data.meta.msg);
              }
              this.getCateList();
              this.$message.success(response.data.meta.msg);
            },
            (error) => {
              this.$message.error(error);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取父级分类的数据列表
    async getParentCateList() {
      // 获取父级分类的数据列表
      const { data: res } = await this.$http.get("categories", {
        params: { type: 2 },
      });

      if (res.meta.status !== 200) {
        return this.$message.error("获取父级分类的数据分类失败!");
      }
      this.AddCateDiaologInfo.ParentCateList = res.data;
    },
    //获取所有商品信息
    async getCateList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.catagorForm.querInfo,
      });

      if (res.meta.status !== 200) {
        return this.message.error("获取商品列表失败!");
      }

      //   保存商品数组列表
      this.catagorForm.cateList = res.data.result;
      this.catagorForm.total = res.data.total;
    },
  },
  created() {
    this.getCateList();
  },
};
</script>

<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
.btn-addcategories {
  position: relative;
  left: 80%;
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 15px;
  padding: 0;
}
</style>